// 定义全局变量
$drawer-width: auto; // 默认抽屉宽度
$drawer-height: auto; // 默认抽屉高度
$transition-duration: 0.5s; // 默认过渡时间


// 定义遮罩层样式
.drawer-overlay {
  position: fixed;
  background-color: transparent;
  z-index: 10; // 确保遮罩层在抽屉之下
  transition: $transition-duration;
  backdrop-filter: blur(0px);
}

.drawer-overlay-open {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(23, 23, 23, 0.3);
  backdrop-filter: blur(2px);
}

// 定义基本的抽屉样式
.drawer {
  position: fixed;
  //background-color: #ffffff;
  transition: $transition-duration;
  z-index: 100;
  overflow: hidden;
  // 定义关闭按钮样式
  .drawer-close {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    cursor: pointer;
    color: #818181;

    &:hover {
      color: #f1f1f1;
    }
  }
}

// 定义打开按钮样式
.drawer-open-btn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
  position: relative;
  top: 10px;

  &:hover {
    background-color: #444;
  }
}


// 定义动态样式类
@mixin drawer-base() {
  width: 0;
  transition: $transition-duration;
}

.drawer-left {
  @include drawer-base();
  left: 0;
}

.drawer-right {
  @include drawer-base();
  right: 0;
  left: auto;
}

.drawer-top {
  @include drawer-base();
  height: 0;
  width: 100%;
  top: 0;
}

.drawer-bottom {
  @include drawer-base();
  height: 0;
  width: 100%;
  bottom: -100%;
  top: auto;
}

// 定义动态样式类 - 打开状态
@mixin drawer-open($width, $height) {
  width: $width;
  height: $height;
}

.drawer-left.drawer-open {
  @include drawer-open($drawer-width, auto);
}

.drawer-right.drawer-open {
  @include drawer-open($drawer-width, auto);
}

.drawer-top.drawer-open {
  @include drawer-open(100%, $drawer-height);
  top: 0;
}

.drawer-bottom.drawer-open {
  @include drawer-open(100%, $drawer-height);
  bottom: 0;
}